import { AiOutlineDown } from 'react-icons/ai'
import { GoGitBranch, GoDashboard, GoFileCode } from 'react-icons/go'
import Alert from '@mui/material/Alert'
import { Avatar } from '@mui/material'
import Typography from '@mui/material/Typography'
import Chip from '@mui/material/Chip'
import { BiRefresh } from 'react-icons/bi'
import Link from 'next/link'
import { BsQuestionCircle } from 'react-icons/bs'

import * as React from 'react'
import PropTypes from 'prop-types'
import Tabs from '@mui/material/Tabs'
import Tab from '@mui/material/Tab'
import Box from '@mui/material/Box'
import Image from 'next/image'

export default function Report() {
    /**** Tab *******/
    const TabHeader = ({ head, origin, variant }) => (
        <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div>{head}</div>
            <Typography variant="body2" gutterBottom>
                {origin}
                <Typography
                    variant="caption"
                    style={{ color: 'red', paddingLeft: 6 }}
                >
                    {variant}
                </Typography>
            </Typography>
        </div>
    )
    function TabPanel(props) {
        const { children, value, index, ...other } = props

        return (
            <div
                role="tabpanel"
                hidden={value !== index}
                id={`simple-tabpanel-${index}`}
                aria-labelledby={`simple-tab-${index}`}
                {...other}
            >
                {value === index && (
                    <Box sx={{ p: 3 }}>
                        <Typography>{children}</Typography>
                    </Box>
                )}
            </div>
        )
    }

    TabPanel.propTypes = {
        children: PropTypes.node,
        index: PropTypes.number.isRequired,
        value: PropTypes.number.isRequired,
    }

    function a11yProps(index) {
        return {
            id: `simple-tab-${index}`,
            'aria-controls': `simple-tabpanel-${index}`,
        }
    }
    const [value, setValue] = React.useState(0)

    const handleChange = (event, newValue) => {
        setValue(newValue)
    }
    /***************/
    const dataDisplay = (desc, content) => (
        <div className="dataContainer">
            <div
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    fontWeight: 600,
                }}
                className="dataDesc"
            >
                {desc}
                <BsQuestionCircle
                    style={{
                        paddingLeft: 6,
                        color: 'grey',
                        fontWeight: '1.5rem',
                    }}
                />
            </div>
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'center',
                }}
                className="dataContent"
            >
                <Typography
                    variant="h3"
                    style={{ color: '#818faf', fontWeight: 'bold', margin: 12 }}
                >
                    {content}
                </Typography>
            </div>
        </div>
    )
    const Inclined = (
        <div style={{ paddingLeft: 6, paddingRight: 6, color: 'grey' }}>/</div>
    )
    const SiderIcon = (Icon, text) => (
        <>
            <div
                style={{
                    fontSize: '1.4rem',
                    paddingTop: '24px',
                    color: '#8794b3',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                }}
            >
                <Icon />
                <div
                    style={{
                        fontSize: '0.6rem',
                        color: '#8794b3',
                        paddingTop: 6,
                    }}
                >
                    {text}
                </div>
            </div>
        </>
    )

    return (
        <div
            className="container"
            style={{
                height: '100vh',
                width: '100vw',
                display: 'flex',
                flexDirection: 'column',
            }}
        >
            <div
                className="header"
                style={{
                    display: 'flex',
                    height: '80px',
                    backgroundColor: '#1c2a4b',
                    color: 'white',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                }}
            >
                <div
                    className="leftBar"
                    style={{
                        paddingLeft: 12,
                        display: 'flex',
                        flexDirection: 'row',
                        alignItems: 'center',
                    }}
                >
                    <h2>代码变更质量评估</h2>
                    <div
                        className="info"
                        style={{
                            height: '100%',
                            display: 'flex',
                            paddingLeft: 24,
                            color: 'grey',
                        }}
                    >
                        朱奕航
                    </div>
                    <AiOutlineDown style={{ paddingLeft: 12, color: 'grey' }} />
                    <div
                        className="breadcrumb"
                        style={{ paddingLeft: 12, display: 'flex' }}
                    >
                        {Inclined} AOSP {Inclined} platform-base {Inclined}{' '}
                    </div>
                </div>

                <div
                    className="rightBar"
                    style={{
                        padding: 12,
                        display: 'flex',
                        alignItems: 'center',
                    }}
                >
                    <span style={{ paddingRight: 12 }}>
                        9ace0a692205839904352302d6a2c44627bbb882
                    </span>
                </div>
            </div>
            <div className="container" style={{ display: 'flex', flexGrow: 1 }}>
                <div
                    className="left"
                    style={{
                        width: '100px',
                        height: '100%',
                        backgroundColor: '#ECF1fE',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                    }}
                >
                    {SiderIcon(GoDashboard, 'dashBoard')}
                    {SiderIcon(GoGitBranch, 'commits')}
                    {SiderIcon(GoFileCode, 'files')}
                </div>
                <div
                    className="main"
                    style={{
                        flexGrow: 1,
                        display: 'flex',
                        flexDirection: 'column',
                        padding: 16,
                    }}
                >
                    <div
                        className="upper"
                        style={{
                            display: 'flex',
                        }}
                    >
                        <div
                            className="card"
                            style={{
                                border: '2px solid #d9e2f1',
                                margin: '8px',
                                padding: '24px',
                                width: '60%',
                                borderRadius: 5,
                                boxShadow: '5px 5px 10px #d9e2f1',
                                display: 'flex',
                            }}
                        >
                            <Avatar alt="Z" src="kong" />
                            <div
                                className="cardInfo"
                                style={{ flexGrow: 1, paddingLeft: 12 }}
                            >
                                <div
                                    style={{
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                    }}
                                >
                                    <Typography>
                                        朱奕航 merge{' '}
                                        <span style={{ fontWeight: 'bolder' }}>
                                            /feat/dev
                                        </span>{' '}
                                        into{' '}
                                        <span style={{ fontWeight: 'bolder' }}>
                                            main
                                        </span>
                                    </Typography>
                                    <span style={{ color: 'grey' }}>
                                        April 24
                                    </span>
                                </div>
                                <Chip
                                    label="feature"
                                    color="success"
                                    size="small"
                                    style={{ marginBottom: 12 }}
                                />

                                <Typography
                                    variant="body2"
                                    style={{ marginBottom: 12 }}
                                >
                                    add options for checking the quality of code
                                    changes
                                </Typography>
                                <Typography
                                    gutterBottom
                                    variant="body2"
                                    style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                    }}
                                >
                                    <span
                                        style={{
                                            color: 'grey',
                                            marginRight: 12,
                                        }}
                                    >
                                        current status:
                                    </span>
                                    Analyzed
                                    <BiRefresh style={{ fontSize: '1.5rem' }} />
                                </Typography>
                                <Link href="/report">view logs</Link>
                            </div>
                        </div>
                        <div
                            className="info"
                            style={{
                                margin: '8px',
                                padding: '8px',
                                width: '60%',
                            }}
                        >
                            <Alert severity="success">
                                <span style={{ fontWeight: 500 }}>
                                    变更符合规范
                                </span>
                                ，可以提交
                            </Alert>
                        </div>
                    </div>
                    <div
                        className="data"
                        style={{
                            width: '60%',
                            margin: '20px auto',
                            display: 'flex',
                            justifyContent: 'space-around',
                        }}
                    >
                        {dataDisplay('Issues', '=')}
                        {dataDisplay('Duplication', '=')}
                        {dataDisplay('Complexity', '+4')}
                        {dataDisplay(
                            'Coverage',
                            <div
                                style={{
                                    display: 'flex',
                                    width: 260,
                                    justifyContent: 'space-between',
                                }}
                            >
                                <div style={{ display: 'flex' }}>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                        }}
                                    >
                                        90%
                                        <Typography variant="body2">
                                            Diff Coverage
                                        </Typography>
                                    </div>
                                </div>
                                <div style={{ display: 'flex' }}>
                                    <div
                                        style={{
                                            display: 'flex',
                                            flexDirection: 'column',
                                        }}
                                    >
                                        -2.03%
                                        <Typography variant="body2">
                                            Variation
                                        </Typography>
                                    </div>
                                </div>
                            </div>,
                        )}
                    </div>
                    <div className="tabs">
                        <Box sx={{ width: '100%' }}>
                            <Box
                                sx={{ borderBottom: 1, borderColor: 'divider' }}
                            >
                                <Tabs
                                    value={value}
                                    onChange={handleChange}
                                    aria-label="basic tabs example"
                                >
                                    <Tab
                                        label={
                                            <TabHeader
                                                head={'Issues'}
                                                origin={'3'}
                                                // variant={'+2%'}
                                            />
                                        }
                                        {...a11yProps(0)}
                                    />
                                    <Tab
                                        label={
                                            <TabHeader
                                                head={'Diff'}
                                                origin={'4'}
                                                variant={'topics'}
                                            />
                                        }
                                    />
                                    <Tab
                                        label={
                                            <TabHeader
                                                head={'Complexity'}
                                                origin={'+4'}
                                                variant={'+2%'}
                                            />
                                        }
                                        {...a11yProps(2)}
                                    />
                                </Tabs>
                            </Box>
                            <TabPanel value={value} index={0}>
                                Item One
                            </TabPanel>
                            <TabPanel value={value} index={1}>
                                <Image
                                    src="/diff_label.png"
                                    alt="diff"
                                    width={'100%'}
                                />
                            </TabPanel>
                            <TabPanel value={value} index={2}>
                                Item Three
                            </TabPanel>
                        </Box>
                    </div>
                </div>
            </div>
        </div>
    )
}
